<div class="layout layout-row layout-wrap" layout="row" layout-align="space-around center">
    <md-toolbar class="md-hue-3 md-accent" layout="row" layout-align="start center">
        <div ng-include="'app/layout/BackButton.html'"></div> <!--ng-if="vm.ShowControls"-->
        <h3 class="marginleft20">Process Referral</h3>
    </md-toolbar>
</div>

<form name="ProcessReferralForm" ng-cloak>
    <div class="layout-fill" layout="column" layout-align="space-around stretch" layout-padding>
        <div class="layout-wrap" layout="column" layout-gt-sm="row" layout-align="space-between stretch">
            <div>
                <md-card class="md-whiteframe-9dp patientCard" layout="column" flex="100">
                    <md-toolbar class="md-hue-2 md-primary">
                        <h3>Referral Details</h3>
                    </md-toolbar>
                    <md-card-content layout="column" layout-align="start stretch" layout-wrap>
                        <div layout-gt-xs="row" layout="column" layout-align="space-around stretch">
                            <div layout-gt-xs="row" layout="column" layout-align="start center" flex>
                                <p class="cardcontentsubheading">Name:</p>
                                <p class="cardcontentvalue">LastName, FirstName</p>
                            </div>
                        </div>

                        <div layout-gt-xs="row" layout="column" layout-align="space-around stretch">
                            <div layout-gt-xs="row" layout="column" layout-align="start center" flex>
                                <p class="cardcontentsubheading">DOB:</p>
                                <p class="cardcontentvalue">01/01/2000</p>
                            </div>
                            <div class="width20"></div>
                            <div layout-gt-xs="row" layout="column" layout-align="start center" flex>
                                <p class="cardcontentsubheading">Gender:</p>
                                <p class="cardcontentvalue">Female</p>
                            </div>
                        </div>

                        <md-divider></md-divider>

                        <div layout="column" layout-align="space-around stretch">
                            <div layout-gt-xs="row" layout="column" layout-align="start center" flex="100">
                                <p class="cardcontentsubheading">Requesting Physician:</p>
                                <p class="cardcontentvalue">Dr. PhysicianFirstName, LastName</p>
                            </div>
                            <div layout-gt-xs="row" layout="column" layout-align="start center" flex="100">
                                <p class="cardcontentsubheading">Requesting Physican Practice:</p>
                                <p class="cardcontentvalue">Practice Name</p>
                            </div>
                            <div layout-gt-xs="row" layout="column" layout-align="start center" flex="100">
                                <p class="cardcontentsubheading">Requested Practice:</p>
                                <p class="cardcontentvalue">Practice Name</p>
                            </div>
                            <div layout-gt-xs="row" layout="column" layout-align="start center" flex="100">
                                <p class="cardcontentsubheading">Preferred Physician Requested</p>
                                <p class="cardcontentvalue">Dr. PhysicianFirstName, LastName</p>
                            </div>
                        </div>
                    </md-card-content>
                </md-card>
            </div>

            <div layout="column" flex>
                <md-card class="md-whiteframe-9dp patientCard" flex="100">
                    <md-toolbar class="md-hue-2 md-primary">
                        <div layout="row" layout-align="space-between center" flex>
                            <h3>Physician Assignment</h3>
                        </div>
                    </md-toolbar>

                    <md-card-content layout="column" layout-align="start stretch">
                        <div layout-gt-xs="row" layout="column" layout-align="space-around stretch">
                            <div layout-gt-xs="row" layout="column" layout-align="start center" flex>
                                <span class="referralmodification"><b>Last updated by: Murali Venugopalan on 12/20/2016 18:36 PM</b></span>
                            </div>
                        </div>
                        <br /><md-divider></md-divider>
                        <div layout="column" layout-align="space-around stretch" flex>
                            <div layout="row" layout-align="start center">
                                <p class="cardcontentsubheading">Practice:</p>
                                
                                <md-input-container class="md-icon-float md-block md-accent">
                                    <label>Selected Practice</label>
                                    <md-select ng-model="vm.AssignedPractice" required name="AssignedPractice" flex ng-disabled="vm.PhyAsgRO">
                                        <md-option ng-repeat="Pr in vm.PracticeList" value="{{Pr.PracticeID}}">
                                            {{Pr.PracticeName}}
                                        </md-option>
                                    </md-select>
                                    <div ng-messages="ProcessReferralForm.AssignedPractice.$error" role="alert">
                                        <div ng-message-exp="['required']">
                                            Practice assignment cannot be blank
                                        </div>
                                    </div>
                                </md-input-container>
                            </div>

                            <div layout="row" layout-align="start center">
                                <p class="cardcontentsubheading">Physician:</p>
                                <md-input-container class="md-icon-float md-block md-accent">
                                    <label>Selected Physician</label>
                                    <md-select ng-model="vm.AssignedPhysician" required name="AssignedPhysician" flex ng-disabled="vm.PhyAsgRO">
                                        <md-option ng-repeat="Py in vm.PhysicianList" value="{{Py.PhysicianID}}">
                                            {{Py.PhysicianFullName}}
                                        </md-option>
                                    </md-select>
                                    <div ng-messages="ProcessReferralForm.AssignedPractice.$error" role="alert">
                                        <div ng-message-exp="['required']">
                                            Physician assigment cannot be blank
                                        </div>
                                    </div>
                                </md-input-container>
                            </div>
                        </div>
                    </md-card-content>

                    <md-card-actions layout="row" layout-align="space-between center" layout-align-gt-sm="end center">
                        <md-button hide-gt-sm class="md-fab md-hue-2 md-hue-3" aria-label="Edit" style="margin:0px 10px 10px 10px" ng-click="vm.GoToTop()">
                            <md-tooltip>Go to top</md-tooltip>
                            <md-icon md-font-library="material-icons">&#xE5D8;</md-icon>
                        </md-button>

                        <div layout="row" layout-align="end center">
                            <md-button class="md-fab md-hue-2 md-primary" aria-label="Edit" style="margin:0px 10px 10px 0px" ng-click="vm.TogglePhyAsgEditMode()">
                                <md-tooltip>{{vm.PhyAsgTooltip}}</md-tooltip>
                                <md-icon md-font-library="material-icons">{{vm.PhyAsgIcon}}</md-icon>
                            </md-button>
                        </div>
                    </md-card-actions>
                </md-card>
            </div>
        </div>

        <div class="layout-wrap" layout="column" layout-gt-sm="row" layout-align="space-around stretch">
            <div layout="column" flex>
                <md-card class="md-whiteframe-9dp patientCard" layout="column" flex="100">
                    <md-toolbar class="md-hue-2 md-primary">
                        <h3>Referral Status</h3>
                    </md-toolbar>
                    <md-card-content layout="column" layout-align="start stretch" layout-wrap>
                        <div layout-gt-xs="row" layout="column" layout-align="space-around stretch">
                            <div layout-gt-xs="row" layout="column" layout-align="start center" flex>
                                <span class="referralmodification"><b>Last updated by: Murali Venugopalan on 12/20/2016 18:36 PM</b></span>
                            </div>
                        </div>
                        <br /><md-divider></md-divider>
                        <div layout-gt-xs="row" layout="column" layout-align="space-around stretch">
                            <div layout="column" layout-align="start stretch" flex>
                                <p class="cardcontentsubheading" style="padding-bottom:0px; margin-bottom:0px;">Accept Referral:</p>
                                <md-radio-group class="cardcontentvalue" layout="row" ng-model="vm.ReferralAccepted">
                                    <md-radio-button value="true" class="md-hue-3" ng-disabled="vm.RefStatRO">Yes</md-radio-button>
                                    <md-radio-button value="false" class="md-warn" ng-disabled="vm.RefStatRO"> No </md-radio-button>
                                </md-radio-group>
                            </div>
                        </div>

                        <div layout-gt-xs="row" layout="column" layout-align="space-around stretch">
                            <div layout="column" layout-align="start stretch" flex>
                                <p class="cardcontentsubheading">Notes for accepting referral:</p>
                                <md-input-container class="md-icon-float md-block md-accent">
                                    <textarea class="StyledTextInput" ng-model="vm.ReferralAcceptedNotes" name="ReferralAcceptedNotes" rows="7" md-maxlength="1000" ng-readonly="vm.RefStatRO"></textarea>
                                    <div ng-messages="ProcessReferralForm.ReferralAcceptedNotes.$error" multiple md-auto-hide="false" role="alert">
                                        <div ng-message-exp="['maxlength']">
                                            The note should be less than 1000 characters long
                                        </div>
                                    </div>
                                </md-input-container>
                            </div>
                        </div>
                    </md-card-content>
                    <md-card-actions layout="row" layout-align="space-between center">
                        <md-button class="md-fab md-hue-2 md-hue-3" aria-label="Edit" style="margin:0px 10px 10px 10px" ng-click="vm.GoToTop()">
                            <md-tooltip>Go to top</md-tooltip>
                            <md-icon md-font-library="material-icons">&#xE5D8;</md-icon>
                        </md-button>

                        <div layout="row" layout-align="end center">
                            <md-button class="md-fab md-hue-2 md-primary" aria-label="Edit" style="margin:0px 10px 10px 0px" ng-click="vm.ToggleRefStatEditMode()">
                                <md-tooltip>{{vm.RefStatTooltip}}</md-tooltip>
                                <md-icon md-font-library="material-icons">{{vm.RefStatIcon}}</md-icon>
                            </md-button>
                        </div>
                    </md-card-actions>
                </md-card>
            </div>
            <div layout="column" flex>
                <md-card class="md-whiteframe-9dp patientCard" layout="column" flex="100">
                    <md-toolbar class="md-hue-2 md-primary">
                        <h3>Patient Scheduling</h3>
                    </md-toolbar>
                    <md-card-content layout="column" layout-align="start stretch" layout-wrap>
                        <div layout-gt-xs="row" layout="column" layout-align="space-around stretch">
                            <div layout-gt-xs="row" layout="column" layout-align="start center" flex>
                                <span class="referralmodification"><b>Last updated by: Murali Venugopalan on 12/20/2016 18:36 PM</b></span>
                            </div>
                        </div>
                        <br /><md-divider></md-divider>
                        <div layout-gt-xs="row" layout="column" layout-align="space-around stretch">
                            <div layout="column" layout-align="start stretch" flex>
                                <md-switch ng-model="vm.PatScheduling" aria-label="Contacted Patient" ng-disabled="vm.SchStatRO">
                                    Contacted Patient
                                </md-switch>

                                <md-input-container class="md-icon-float md-block md-accent inputValidation" flex>
                                    <label>Appointment Date</label>
                                    <md-datepicker ng-model="vm.AppointmentDate" required name="AppointmentDate" flex ng-disabled="vm.SchStatRO"></md-datepicker>
                                    <div ng-messages="ProcessReferralForm.AppointmentDate.$error" role="alert">
                                        <div ng-message-exp="['required']">
                                            Appointment date cannot be blank
                                        </div>
                                        <div ng-message-exp="['valid']">
                                            Entered date is invalid!
                                        </div>
                                    </div>
                                </md-input-container>

                                <md-input-container class="md-icon-float md-block md-accent">
                                    <label>Appointment Time</label>
                                    <input ng-model="vm.ApptTime" type="text" name="ApptTime" ng-readonly="vm.SchStatRO" />
                                </md-input-container>

                                <div layout-gt-xs="row" layout="column" layout-align="space-around stretch">
                                    <div layout="column" layout-align="start stretch" flex>
                                        <p class="cardcontentsubheading">Notes for patient contact:</p>
                                        <md-input-container class="md-icon-float md-block md-accent">
                                            <textarea class="StyledTextInput" ng-model="vm.ReferralAcceptedNotes" name="ReferralAcceptedNotes" rows="2" md-maxlength="1000" ng-readonly="vm.RefStatRO"></textarea>
                                            <div ng-messages="ProcessReferralForm.ReferralAcceptedNotes.$error" multiple md-auto-hide="false" role="alert">
                                                <div ng-message-exp="['maxlength']">
                                                    The note should be less than 1000 characters long
                                                </div>
                                            </div>
                                        </md-input-container>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </md-card-content>
                    <md-card-actions layout="row" layout-align="space-between center" layout-align-gt-sm="end center">
                        <md-button hide-gt-sm class="md-fab md-hue-2 md-hue-3" aria-label="Edit" style="margin:0px 10px 10px 10px" ng-click="vm.GoToTop()">
                            <md-tooltip>Go to top</md-tooltip>
                            <md-icon md-font-library="material-icons">&#xE5D8;</md-icon>
                        </md-button>

                        <md-button class="md-fab md-hue-2 md-primary" aria-label="Edit" style="margin:0px 10px 10px 0px" ng-click="vm.ToggleSchStatEditMode()">
                            <md-tooltip>{{vm.SchStatTooltip}}</md-tooltip>
                            <md-icon md-font-library="material-icons">{{vm.SchStatIcon}}</md-icon>
                        </md-button>
                    </md-card-actions>
                </md-card>
            </div>
            <div layout="column" flex>
                <md-card class="md-whiteframe-9dp patientCard" layout="column" flex="100">
                    <md-toolbar class="md-hue-2 md-primary">
                        <h3>Patient Visit</h3>
                    </md-toolbar>
                    <md-card-content layout="column" layout-align="start stretch" layout-wrap>
                        <div layout-gt-xs="row" layout="column" layout-align="space-around stretch">
                            <div layout-gt-xs="row" layout="column" layout-align="start center" flex>
                                <span class="referralmodification"><b>Last updated by: Murali Venugopalan on 12/20/2016 18:36 PM</b></span>
                            </div>
                        </div>
                        <br /><md-divider></md-divider>
                        <div layout-gt-xs="row" layout="column" layout-align="space-around stretch">
                            <div layout="column" layout-align="start stretch" flex>
                                <md-switch ng-model="vm.PatientContact" aria-label="Patient Visit completed" ng-disabled="vm.VisitStatRO">
                                    Patient Visit completed
                                </md-switch>
                            </div>
                        </div>

                        <div layout-gt-xs="row" layout="column" layout-align="space-around stretch">
                            <div layout="column" layout-align="start stretch" flex>
                                <p class="cardcontentsubheading">Notes for patient vist:</p>
                                <md-input-container class="md-icon-float md-block md-accent">
                                    <textarea class="StyledTextInput" ng-model="vm.VisitNotes" name="VisitNotes" rows="7" md-maxlength="1000" ng-readonly="vm.VisitStatRO"></textarea>
                                    <div ng-messages="ProcessReferralForm.VisitNotes.$error" multiple md-auto-hide="false" role="alert">
                                        <div ng-message-exp="['maxlength']">
                                            The notes for referral status be less than 1000 characters long
                                        </div>
                                    </div>
                                </md-input-container>
                            </div>
                        </div>
                    </md-card-content>
                    <md-card-actions layout="row" layout-align="space-between center" layout-align-gt-sm="end center">
                        <md-button hide-gt-sm class="md-fab md-hue-2 md-hue-3" aria-label="Edit" style="margin:0px 10px 10px 10px" ng-click="vm.GoToTop()">
                            <md-tooltip>Go to top</md-tooltip>
                            <md-icon md-font-library="material-icons">&#xE5D8;</md-icon>
                        </md-button>

                        <md-button class="md-fab md-hue-2 md-primary" aria-label="Edit" style="margin:0px 10px 10px 0px" ng-click="vm.ToggleVisitStatEditMode()">
                            <md-tooltip>{{vm.VisitStatTooltip}}</md-tooltip>
                            <md-icon md-font-library="material-icons">{{vm.VisitStatIcon}}</md-icon>
                        </md-button>
                    </md-card-actions>
                </md-card>
            </div>
            <div layout="column" flex>
                <md-card class="md-whiteframe-9dp patientCard" layout="column" flex="100">
                    <md-toolbar class="md-hue-2 md-primary">
                        <h3>Note Status</h3>
                    </md-toolbar>
                    <md-card-content layout="column" layout-align="start stretch" layout-wrap>
                        <div layout-gt-xs="row" layout="column" layout-align="space-around stretch">
                            <div layout-gt-xs="row" layout="column" layout-align="start center" flex>
                                <span class="referralmodification"><b>Last updated by: Murali Venugopalan on 12/20/2016 18:36 PM</b></span>
                            </div>
                        </div>
                        <br /><md-divider></md-divider>
                        <div layout-gt-xs="row" layout="column" layout-align="space-around stretch">
                            <div layout="column" layout-align="start stretch" flex>
                                <md-switch ng-model="vm.NoteSent" aria-label="Note completed and sent" ng-disabled="vm.NoteStatRO">
                                    Note completed and sent
                                </md-switch>

                                <md-input-container class="md-icon-float md-block md-accent inputValidation" flex>
                                    <label>Note Sent Date</label>
                                    <md-datepicker ng-model="vm.NoteDate" required name="NoteDate" flex ng-disabled="vm.NoteStatRO"></md-datepicker>
                                    <div ng-messages="ProcessReferralForm.NoteDate.$error" role="alert">
                                        <div ng-message-exp="['required']">
                                            Note sent cannot be blank
                                        </div>
                                        <div ng-message-exp="['valid']">
                                            Entered date is invalid!
                                        </div>
                                    </div>
                                </md-input-container>

                                <div layout-gt-xs="row" layout="column" layout-align="space-around stretch">
                                    <div layout="column" layout-align="start stretch" flex>
                                        <p class="cardcontentsubheading">Notes:</p>
                                        <md-input-container class="md-icon-float md-block md-accent">
                                            <textarea class="StyledTextInput" ng-model="vm.NoteSentNotes" name="NoteSentNotes" rows="5" md-maxlength="1000" ng-readonly="vm.NoteStatRO"></textarea>
                                            <div ng-messages="ProcessReferralForm.NoteSentNotes.$error" multiple md-auto-hide="false" role="alert">
                                                <div ng-message-exp="['maxlength']">
                                                    The note should be less than 1000 characters long
                                                </div>
                                            </div>
                                        </md-input-container>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </md-card-content>
                    <md-card-actions layout="row" layout-align="space-between center" layout-align-gt-sm="end center">
                        <md-button hide-gt-sm class="md-fab md-hue-2 md-hue-3" aria-label="Edit" style="margin:0px 10px 10px 10px" ng-click="vm.GoToTop()">
                            <md-tooltip>Go to top</md-tooltip>
                            <md-icon md-font-library="material-icons">&#xE5D8;</md-icon>
                        </md-button>

                        <md-button class="md-fab md-hue-2 md-primary" aria-label="Edit" style="margin:0px 10px 10px 0px" ng-click="vm.ToggleNoteStatEditMode()">
                            <md-tooltip>{{vm.NoteStatTooltip}}</md-tooltip>
                            <md-icon md-font-library="material-icons">{{vm.NoteStatIcon}}</md-icon>
                        </md-button>
                    </md-card-actions>
                </md-card>
            </div>
        </div>

    </div>
</form>
<!--<div class="layout-fill" layout="column" layout-align="space-around stretch" layout-padding>
    <md-fab-speed-dial md-direction="right" class="md-fling md-fab-bottom-left" md-open="false">
        <md-fab-trigger>
            <md-button aria-label="menu" class="md-fab md-warn">
                <md-tooltip md-direction="top">Menu</md-tooltip>
                <md-icon md-svg-src="img/icons/menu.svg"></md-icon>
            </md-button>
        </md-fab-trigger>

        <md-fab-actions>
            <md-button aria-label="twitter" class="md-fab md-raised md-mini">
                <md-tooltip md-direction="left">Twitter</md-tooltip>
                <md-icon md-svg-src="img/icons/twitter.svg"></md-icon>
            </md-button>

            <md-button aria-label="facebook" class="md-fab md-raised md-mini">
                <md-tooltip md-direction="right">Facebook</md-tooltip>
                <md-icon md-svg-src="img/icons/facebook.svg"></md-icon>
            </md-button>

            <md-button aria-label="Google Hangout" class="md-fab md-raised md-mini">
                <md-tooltip md-direction="left">Google Hangout</md-tooltip>
                <md-icon md-svg-src="img/icons/hangout.svg"></md-icon>
            </md-button>
        </md-fab-actions>
    </md-fab-speed-dial>
</div>-->
